<template>
  <view class="box">
    <view class="title">审批流程</view>
    <view class="process">
      <edit-item :list="list" @add-user="add"></edit-item>
    </view>
  </view>
</template>

<script>
import editItem from './componemts/edit-item.vue';
export default {
  data() {
    return {
      list: [
        {
          flowType: 'test1', //审批(抄送)人
          isOperate: true, // 是否可编辑
          approveType: 'single',
          rangeType: 'assign', // 是否跳过   上一节点审批人指定
          selectedUserList: [
            {
              headUrl: 'https://dummyimage.com/44x44/000/fff', //用户头像
              userName: 'sss1', //用户姓名
              userId: '1', //id
            },
          ], //人员列表
        },
        {
          flowType: 'test2', //审批(抄送)人
          isOperate: true, // 是否可编辑
          approveType: 'jointly',
          rangeType: 'superior', // 是否跳过   上一节点审批人指定
          selectedUserList: [
            {
              headUrl: 'https://dummyimage.com/44x44/000/fff', //用户头像
              userName: 'sss2', //用户姓名
              userId: '2', //id
            },
          ], //人员列表
        },
        {
          flowType: 'test3', //审批(抄送)人
          isOperate: true, // 是否可编辑
          approveType: 'or',
          rangeType: 'customize', // 是否跳过   上一节点审批人指定
          selectedUserList: [
            {
              headUrl: 'https://dummyimage.com/44x44/000/fff', //用户头像
              userName: 'sss1', //用户姓名
              userId: '1', //id
            },
            {
              headUrl: 'https://dummyimage.com/44x44/000/fff', //用户头像
              userName: 'sss2', //用户姓名
              userId: '2', //id
            },
            {
              headUrl: 'https://dummyimage.com/44x44/000/fff', //用户头像
              userName: 'sss3', //用户姓名
              userId: '3', //id
            },
            {
              headUrl: 'https://dummyimage.com/44x44/000/fff', //用户头像
              userName: 'sss4', //用户姓名
              userId: '4', //id
            },
            {
              headUrl: 'https://dummyimage.com/44x44/000/fff', //用户头像
              userName: 'sss5', //用户姓名
              userId: '5', //id
            },
            {
              headUrl: 'https://dummyimage.com/44x44/000/fff', //用户头像
              userName: 'sss6', //用户姓名
              userId: '6', //id
            },
            {
              headUrl: 'https://dummyimage.com/44x44/000/fff', //用户头像
              userName: 'sss7', //用户姓名
              userId: '7', //id
            },
            {
              headUrl: 'https://dummyimage.com/44x44/000/fff', //用户头像
              userName: 'sss8', //用户姓名
              userId: '8', //id
            },
          ], //人员列表
        },
      ],
    };
  },
  components: { editItem },
  methods: {
    add(callback, i) {
      callback(
        [
          {
            headUrl: 'https://dummyimage.com/44x44/000/fff', //用户头像
            userName: 'sss' + i, //用户姓名
            userId: i,
          },
        ],
        i
      );
    },
  },

  created() {},
};
</script>
<style lang="scss" scoped>
.box {
  background-color: #fff;
}
.title {
  height: 88rpx;
  line-height: 88rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  font-size: 30rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
}
</style>
